<template>
	<view class="list">
		<block v-for="item in list" :key="item.id">
			<view class="item" @click="clickFun(item)">
				<view class="item-box">
					<view class="item-box-image">
						<u-image
							class="image" 
							width="340rpx" 
							height="340rpx" 
							:src="item.url"></u-image>
					</view>
					<view class="item-box-info">
						<view class="title u-font-lg">{{item.title}}</view>
						<view class="fans">
							<view class="tip">粉丝≥{{item.fans_ask}}</view>
						</view>
						<view class="info-list">
							<view class="info-item">
								<view class="num u-font-lg">¥{{item.price}}</view>
								<view class="text u-font-sm">到手价</view>
							</view>
							<view class="info-item">
								<view class="num u-font-lg">{{item.commission}}</view>
								<view class="text u-font-sm">佣金</view>
							</view>
							<view class="info-item">
								<view class="num u-font-lg">¥{{item.profitable}}</view>
								<view class="text u-font-sm">可赚</view>
							</view>
						</view>
						<view class="info-btn">
							<ABtn 
								:btnHeight="68" 
								:borderRadius="68"
								 :btnHoverClass="item.isFinish ? '' : 'btn-hover-class'"
								:btnBgColor="item.isFinish ? '#cccccc' : '#090909'" 
								:btnColor="item.isFinish ? '#ffffff' : '#dfc083'" 
								:btnText="item.isFinish ? '已结束' : '申请领取'" />
						</view>
					</view>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
import ABtn from '@/components/a-btn/index.vue'
export default {
	components: {
		ABtn
	},
	props: {
		list: {
			type: Array,
			default() {
				return []
			}
		}
	},
	methods: {
		clickFun(item) {
			console.log('11111')
			this.$emit("clickFun",item);
		},
	},
}
</script>

<style lang="scss" scoped>
.list {
	display: flex;
	flex-wrap: wrap;
	.item {
		display: flex;
		justify-content: center;
		width: 360rpx;
		height: 700rpx;
		margin-bottom: 20rpx;
		&-box {
			width: 340rpx;
			height: 100%;
			background-color: $u-bg-white-color;
			border-radius: 20rpx;
			overflow: hidden;
			&-image {
				height: 340rpx;
			}
			&-info {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				height: 360rpx;
				padding: 20rpx;
				.title {
					line-height: 36rpx;
					font-weight: 600;
					color: $u-text-color;
				}
				.fans {
					display: flex;
					color: $u-text-vip-color;
					.tip {
						display: flex;
						align-items: center;
						justify-content: center;
						height: 40rpx;
						background-color: #232323;
						border-top-right-radius: 20rpx;
						padding: 0 16rpx;
					}
				}
				.info-list {
					display: flex;
					align-items: center;
					justify-content: space-between;
					.info-item {
						display: flex;
						flex-direction: column;
						// flex: 1;
						align-items: center;
						justify-content: space-between;
						height: 64rpx;
						.num {
							font-weight: 600;
							color: $u-text-color;
						}
						.text {
							color: $u-text-light-color;
						}
					}
				}
				.info-btn {
					
				}
			}
		}
	}
}
</style>
